var HtmlWebpackPlugin = require('html-webpack-plugin');
// 人物属性
const path = require('path');

module.exports = {
  entry: './src/main.js',//webpack入口
  output: { //出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html' // 以此为基准生成打包后html文件
    })
  ],
  module: {
    rules: [ // loader的规则
      {
        test: /\.css$/, // 匹配所有的css文件
        // use数组里从右向左运行
        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
        // 再用 style-loader 将样式, 把css插入到dom中
        use: [ "style-loader", "css-loader"]
        // 从右到做的，所以不能颠倒顺序
      },
      {
        test:/\.less$/,
        use:["style-loader", "css-loader","less-loader"]
      },
      {// 图片文件的配置（仅用于webpack5版本）
        test:/\.(gif|png|jpg|jpeg)$/,
        type:'asset'//匹配上面的资源后，webpack会把它们当做静态的资源处理打包
        // 如果你设置的是asset模式
        // 以8kb大小区分图片文件
        // 小于8kb的，把图片转base64，打包进js
      }
    ],
  },

};
